<template>
  <su-popup :show="show" type="bottom" round="20" show-close background-color="#f2f2f2" @close="emits('close')">
    <view class="model-box">
      <view class="title ss-m-t-38 ss-m-l-20 ss-m-b-40">活动优惠</view>
      <scroll-view class="model-content ss-m-l-20" scroll-y :scroll-with-animation="false" :enable-back-to-top="true">
        <view v-for="(item, index) in state.orderInfo.promo_infos" :key="index">
          <view class="ss-flex ss-m-b-40 subtitle">
            <view>共{{ item.goods_ids.length }}件，</view>
            <view v-if="item.activity_type === 'full_discount'">
              满{{ item.discount_rule.full }}打{{ item.discount_rule.discount }}折,已减
            </view>
            <view v-if="item.activity_type === 'full_gift'">满赠</view>
            <view v-if="item.activity_type === 'full_reduce'">
              满{{ item.discount_rule.full }}减{{ item.discount_rule.discount }},已减
            </view>
            <view class="price-text">￥{{ item.promo_discount_money || '0.00' }}</view>
          </view>
          <scroll-view class="scroll-box" scroll-x scroll-anchoring>
            <view class="ss-flex">
              <view v-for="i in item.goods_ids" :key="i">
                <image class="content-img" :src="sheep.$url.cdn(getGoodsImg(i))" />
              </view>
            </view>
          </scroll-view>
        </view>
      </scroll-view>
    </view>
    <view class="modal-footer ss-flex">
      <button class="confirm-btn ss-reset-button" @tap="emits('close')">确认</button>
    </view>
  </su-popup>
</template>
<script setup>
import { computed, reactive } from 'vue'
import sheep from '@/sheep'
const props = defineProps({
  promoInfo: {
    type: Array,
    default: () => [],
  },
  goodsList: {
    type: Array,
    default: () => [],
  },
  modelValue: {
    type: Object,
    default() {},
  },
  show: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['close'])
const state = reactive({
  orderInfo: computed(() => props.modelValue),
})
const getGoodsImg = (e) => {
  let goodsImg = ''
  state.orderInfo.goods_list.forEach((i) => {
    if (e == i.goods_id) {
      goodsImg = i.goods.image
    }
  })
  return goodsImg
}
</script>
<style lang="scss" scoped>
.model-box {
  height: 60vh;
}
.model-content {
  height: 54vh;
}
.modal-footer {
  width: 100%;
  height: 120rpx;
  background: #fff;
}
.confirm-btn {
  width: 710rpx;
  margin-left: 20rpx;
  height: 80rpx;
  background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
  border-radius: 40rpx;
  color: #fff;
}
.content-img {
  width: 140rpx;
  height: 140rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}
.subtitle {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
}
.price-text {
  color: #ff3000;
}
</style>
